import { useState } from "react"
/**
 * 父子组件通信 子传父
 * 【思路】：在子组件中调用父组件中的函数并传递参数
 * 【步骤】：1、在父组件中定义一个函数、并通过自定义事件将这个函数传递给子组件
 *          2、在子组件的形参列表解构父组件传递过来的事件名称
 *          3、在子组件中调用传递的方法
 *          
 */
function Son({ onMessage }) {
  // 4、在子组件形参列表接收并解构该函数
  let message = "Hello Son"
  return (
    // 5、通过父组件传递过来的函数，将数据传递父组件
    <button onClick={() => onMessage(message)}>子组件</button>
  )
}

function SontoFather() { // 父组件
  // 1、在父组件中定义函数
  let getMessage = (msg) => setMessage(msg)
  // 2、定义数据
  let [message, setMessage] = useState(null)
  return (
    <div>
      {/* 3、将函数传递给子组件 */}
      父组件：{message} <Son onMessage={getMessage}> </Son>
    </div>
  )
}

export default SontoFather
